<template>
  <div class="demo">
    <div class="demo-title">省略号</div>
    <div class="demo-content">
      <Switch v-model:checked="ellipsis" />
      <Typography.Paragraph :ellipsis="ellipsis" :content="content" />
      <Typography.Paragraph
        :ellipsis="ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false"
        :content="`${content} ${content}`"
      />
      <Typography.Text
        :style="ellipsis ? { width: '100px' } : {}"
        :ellipsis="ellipsis ? { tooltip: 'I am ellipsis now!' } : false"
        :content="content"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Switch from '@sscd/switch';
  import Typography from '@sscd/typography';
  const ellipsis = ref(true);
  const content = ref(
    'SSC+Design is a design system developed by SSC for products and digital experiences. The system is based on SSC+Design language and consists of working code, design tools and resources, and human-machine interface guidelines.'
  );
</script>
